<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue.js - 基础</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <input type="text" v-focus>
        <hr>
        <div class="box" v-if="isShow" v-bg:sss="'red'">{{title}}</div>
        <!-- <div class="box" v-bg:www.qqq="'green'"></div> -->
    </div> 

    <!-- 引入vue框架 开发版 :包含警告 和调试信息 -->
    <script src="../lib/vue.js"></script>
    <script>
        //注册自定义指令 : 可以理解为提供一种变相的dom操作 , 可以提供灵活复用操作
        //以前
        // document.querySelector(".box").style.backgroundColor="red";  

        //注册一个全局指令 
        // Vue.directive('bg' , function(el , binding){//el 就是使用指令的dom对象 , binding => {expression , name , rawName , value , arg}
        //     el.style.backgroundColor= "red";
        // })

        // Vue.directive('bg' , function(el , binding){//el 就是使用指令的dom对象 , binding => {expression , name , rawName , value , modifiers ,arg}
        //     console.log(el , binding)
        //     el.style.backgroundColor= binding.value;
        // })

        //自定义指令的生命周期
        Vue.directive('bg' , {
            bind:(el , binding)=>{ //只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。(指令元素还只是编译完成,但未插入到DOM)
                console.log('首次绑定...',el);
            },
            inserted:(el , binding)=>{//被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。(在模板渲染完毕, 生成DOM,插入到网页元素时调用)
                console.log('使用指令的元素已经插入DOM中',el)
            },
            update:()=>{//使用指令元素内容重新渲染时触发
                console.log('数据内容更新')
            },
            componentUpdated:()=>{ //使用指令组件内容重新渲染时触发
                console.log('组件内容更新')
            },
            unbind:()=>{//当前使用指令的元素或组件 已经被移除(删除)
                console.log('使用指令元素移除...')
            }
        })    

        Vue.directive('focus' , {
            inserted(el){
                el.focus();
            }
        })

        //使用自定义指令, 其实跟使用内置指令一样的 通过v-* 格式

        let vm = new Vue({
            el:"#app",//指定Vue挂载的DOM
            data:{//当前vue实例中使用的数据
                isShow:true,
                title:'SSSS'
            },
            methods:{//当前Vue实例中使用到的方法

            }
        })
    </script>
</body>
</html>